<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta name="format-detection" content="telephone=no" />
        <meta property="wb:webmaster" content="f2683c166ddfc491" />
        <meta name="keywords" content="唔哩">
        <!-- <meta name="apple-itunes-app" content="app-id=414478124" /> -->
        <meta name="description" content="唔哩">
        <title>唔哩星座运势</title>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <style type="text/css">
            * { margin: 0; padding: 0; }
            .body { background: #081425 url(images/star_bg.jpg) top left no-repeat; background-size: contain; background-attachment: fixed; }
            .content-box{ position: relative; background: #fff; margin: 100px 25px 40px 25px; border-radius: 3px; }
            .title { position: relative; left: 50%; top: -50px; width: 100px; height: 100px; margin-left: -50px; color: #322220; line-height: 100px; background: #FFD704; text-align: center; border-radius: 50px; }
            .time { line-height: 28px; color: #4a4a4a; text-align: center; margin-top: -50px; }
            .content-nodata { background: url(images/img_startext_cat.png) center 80px no-repeat; background-size: 140px 110px; overflow: hidden; padding-bottom: 50px; }
            .content-nodata p { text-align: center; font-size: 20px; margin-top: 200px; }
            .content-data { overflow: hidden; margin-top: 15px; padding-bottom: 10px; display: none; }
            .option { margin: 15px; }
            .option i { font-style: normal; color: gold; display: none; font-size: 18px; }
            .option label { font-weight: bold; font-size: 17px; }
            .option .desc { font-size: 15px; line-height: 20px; color: #4a4a4a; margin-top: 10px; }
            .option span { color: #4a4a4a; }
            .hidden { display: none; }
        </style>
    </head>
    <body class="body">
        <div class="content-box">
            <div class="title" id="title">请选择星座</div>
            <div class="time"></div>
            <div class="content-nodata">
                <p>选一个星座测测今日运势~</p>
            </div>
            <div class="content-data">
                <div class="option today">
                    <label>今日运势:</label>
                    <span class="stars">
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                    </span>
                    <p class="desc"></p>
                </div>
                <div class="option health">
                    <label>健康指数:</label>
                    <span class="stars">
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                    </span>
                </div>
                <div class="option love">
                    <label>爱情指数:</label>
                    <span class="stars">
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                    </span>
                </div>
                <div class="option money">
                    <label>财运指数:</label>
                    <span class="stars">
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                    </span>
                </div>
                <div class="option work">
                    <label>工作指数:</label>
                    <span class="stars">
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                        <i>★</i>
                    </span>
                </div>
                <div class="option color">
                    <label>幸运色:</label>
                    <span class="stars"></span>
                </div>
                <div class="option number">
                    <label>幸运数字:</label>
                    <span class="stars">

                    </span>
                </div>
                <div class="option QFriend">
                    <label>速配星座:</label>
                    <span class="stars"></span>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script type="text/JavaScript">
            var plat = getUA();
            var dataset = {
                "name": "狮子座",/*星座名称*/
                "datetime": "2014年06月27日",/*日期*/
                "date": 20140627,
                "all": "89%", /*综合指数*/
                "color": "古铜色", /*幸运色*/
                "health": "95%", /*健康指数*/
                "love": "80%",/*爱情指数*/
                "money": "84%",/*财运指数*/
                "number": 8,/*幸运数字*/
                "QFriend": "处女座",/*速配星座*/
                "summary": "有些思考的小漩涡，可能让你忽然的放空，生活中许多的细节让你感触良多，五味杂陈，常常有时候就慢动作定格，想法在某处冻结停留，陷入一阵自我对话的沉思之中，这个时候你不喜欢被打扰或询问，也不想让某些想法曝光，个性变得有些隐晦。",/*今日概述*/
                "work": "80%",/*工作指数*/
                "error_code": 0/*返回码*/
            }
            function connectWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) {
                    return callback(WebViewJavascriptBridge);
                }
                if (window.WVJBCallbacks) {
                    return window.WVJBCallbacks.push(callback);
                }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() {
                    document.documentElement.removeChild(WVJBIframe)
                }, 0)
            }
            function initIOS(){
                connectWebViewJavascriptBridge(function(bridge) {
                    bridge.registerHandler("reciveData",reciveData);
                })
            }
            function getUA(){
                var UA = navigator.userAgent.toLowerCase(), plat = null;
                if(UA.match(/iphone|ipad|ipod/)){
                    plat = "ios";
                }
                if(UA.match(/android/)){
                    plat = "android";
                }
                return plat;
            }
            function getCurrentTime(){
                var date = new Date();
                return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
            }
            function reciveData(data){
                /**
                 * ios data 是json，需要解析，android data为解析好的对象
                 */
                if(typeof data == "string"){
                    data = JSON.parse(data);
                }
                dataset = data;
                if(dataset){
                    render();
                }else{
                    renderNoData();
                }
            }
            window.reciveData = reciveData;
            function renderData(box,el,text){
                if(!text){
                    text = el;
                    $(box).text(text);
                }else{
                    $(box).find(el).text(text);
                }
            }
            function renderStar(box,score){
                score = +score.slice(0,-1);
                var i = 0;
                do{
                    score -= 20;
                    i ++;
                }while(score > 0);
                $(box).find("i").hide();
                $(box).find("i:lt("+i+")").show();
            }
            function renderNoData(){
                $(".content-nodata").show();
                $(".content-data").hide();
            }
            function render(){
                $(".content-nodata").hide();
                $(".content-data").show();
                renderData(".title",dataset["name"]);
                renderData(".time",dataset["datetime"]);
                /*今日运势*/
                renderStar(".today",dataset["all"]);
                renderData(".today",".desc",dataset["summary"]);
                /*幸运色*/
                renderData(".color",".stars",dataset["color"]);
                /*健康指数*/
                renderStar(".health",dataset["health"]);
                /*爱情指数*/
                renderStar(".love",dataset["love"]);
                /*财运指数*/
                renderStar(".money",dataset["money"]);
                /*工作指数*/
                renderStar(".work",dataset["work"]);
                /*幸运数字*/
                renderData(".number",".stars",dataset["number"]);
                /*速配星座*/
                renderData(".QFriend",".stars",dataset["qfriend"]);
            }

            function bindEvent(){
                document.getElementById("title").addEventListener("click",handleEvent,false);
            }
            function handleEvent(e){
                if(plat == "ios"){
                    WebViewJavascriptBridge.callHandler("receiveJavaScriptHandler",{
                        action: 2,
                        name: "getStarData"
                    },function(response){
                        //alert(response);
                    })
                }else if(plat == "android"){
                    starlistner.getStarData();
                }else{

                }
            }
            function start(){
                if (plat == 'ios'){
                    this.initIOS();
                }
                renderData(".time",getCurrentTime());
                bindEvent();
            }
            start();
        </script>
    </body>
</html>
